import { FC, useState, useEffect, useRef } from 'react';
import { Divider, Space, Table, Button, message, Spin, Pagination } from 'antd';
import { Link } from 'react-router-dom';
import { smallPolicyTableInfoApi } from '@apis/invoiceApis';
import { usePageInfo } from '@src/utils/useIndex';
import { SearcherForm } from './component/searchForm';
export const InviceSearchComponent: FC = () => {
  useEffect(() => {
    //默认进来不查询页面
    console.log('默认进来查询页面');
    getPageList();
    return () => {};
  }, []);
  const { pageInfo, setPageInfo } = usePageInfo();
  const [pageListData, setPageListData] = useState<any>({});
  const [colums] = useState<any>([
    {
      title: '序号',
      dataIndex: 'rowNum',
      key: 'rowNum',
      fixed: 'left',
      width: 100,
      ellipsis: true,
    },
    {
      title: '产品方案代码',
      dataIndex: 'productSchemeCode',
      key: 'productSchemeCode',
      // width: 200,
      ellipsis: true,
    },
    {
      title: '产品方案名称',
      dataIndex: 'productSchemeName',
      key: 'productSchemeName',
      width: 200,
      ellipsis: true,
    },
    {
      title: '商品计划代码',
      dataIndex: 'commodityPlanCode',
      key: 'commodityPlanCode',
      width: 200,
      ellipsis: true,
    },
    {
      title: '商品计划名称',
      dataIndex: 'commodityPlanName',
      key: 'commodityPlanName',
      width: 200,
      ellipsis: true,
    },
    {
      title: '商品计划状态',
      dataIndex: 'commodityPlanStatusCH',
      key: 'commodityPlanStatusCH',
      width: 100,
      ellipsis: true,
    },
    {
      title: '关联环节',
      dataIndex: 'commodityPlanParentId-此字段一期空着后台也没有返回值',
      key: 'commodityPlanParentId',
      width: 200,
      ellipsis: true,
    },
    {
      title: '操作',
      key: 'Actions',
      width: 100,
      fixed: 'right',
      render: (text: any, record: any) => (
        <Space split={<Divider type="vertical" />}>
          <Link
            to={`/ServiceConfig/Detail?commodityPlanCode=${encodeURIComponent(
              record.commodityPlanCode
            )}&&productSchemeCode=${encodeURIComponent(record.productSchemeCode)}`}
          >
            查看
          </Link>
        </Space>
      ),
    },
  ]);
  const [tableLoading, setTableLoading] = useState<boolean>(false);
  const ajaxParams = useRef({});
  const searchBtnF = (formValue: any) => {
    console.log('点击了搜索', formValue);
    ajaxParams.current = formValue;
    setPageInfo({
      ...pageInfo,
      pageNo: 1,
    });
    getPageList(1);
  };
  const getPageList = (pageNo?: any, pageSize: any = pageInfo.pageSize) => {
    // console.trace();
    console.log(pageNo, pageSize);
    console.log({ pageNo, pageSize });
    let canshu: any = {
      ...ajaxParams.current,
      ...pageInfo,
    };
    console.log(JSON.parse(JSON.stringify(ajaxParams.current)));
    if (pageNo !== undefined) {
      canshu.pageNo = pageNo;
      canshu.pageIndex = pageNo;
    }
    if (pageSize !== undefined) {
      canshu.pageSize = pageSize;
    }
    setTableLoading(true);
    smallPolicyTableInfoApi(canshu)
      .then((result: any) => {
        // console.log(result);
        if (result.success) {
          if (
            /*如果后台返回值没有数据 并且并非是在第一页*/
            result.data?.dataList?.length === 0 &&
            result.data?.pageIndex !== 1
          ) {
            getPageList(1, canshu.pageSize);
            return;
          }
          setPageListData(result.data);
          setPageInfo({
            pageNo: result.data.pageIndex,
            pageSize: canshu.pageSize,
          });
        } else {
          message.error(result.message);
        }
      })
      .catch((err: any) => {
        console.log(err);
      })
      .finally(() => {
        setTableLoading(false);
      });
  };

  const paginationChange = (pageNo: number, pageSize: any) => {
    console.log('pageNo=' + pageNo, 'pageSize=' + pageSize);
    getPageList(pageNo, pageSize);
  };

  const showTotal = () => {
    return `共${pageListData?.pageCount}页，${pageListData?.totalCount}条记录`;
  };
  //导出
  const exportF = () => {
    alert('导出时的筛选条件是=' + JSON.stringify(ajaxParams.current));
  };
  return (
    <div className="pageBox">
      <Spin spinning={tableLoading} delay={100}>
        <SearcherForm searchBtnF={searchBtnF} />
        <div className="anTableBox margT10">
          <div className="tableBtns">
            <Button onClick={exportF}>导出</Button>
          </div>
          <Table
            size={'small'}
            scroll={{ x: '100%' }}
            dataSource={pageListData?.dataList || []}
            columns={colums}
            rowKey={(record) => record.rowNum}
            pagination={false}
          />
          <Pagination
            style={{ textAlign: 'right', margin: '10px 0 0 0' }}
            size="small"
            current={pageInfo.pageNo}
            pageSize={pageInfo.pageSize}
            total={pageListData?.totalCount || 0}
            showTotal={showTotal}
            onChange={paginationChange}
            showSizeChanger
            showQuickJumper
          />
        </div>
      </Spin>
    </div>
  );
};
